<template>
	<view class="detail-container">
		<!-- 帖子详情 -->
		<view class="post-detail">
			<view class="user-info">
				<image class="avatar" :src="post.user.avatar_url" mode="aspectFill" />
				<view class="user-detail">
					<text class="username">{{ post.user.nickname }}</text>
				</view>
			</view>
			<view class="content">{{ post.content }}</view>
			<view v-if="post.images && post.images.length" class="image-grid">
				<image
					v-for="(img, imgIndex) in post.images"
					:key="imgIndex"
					class="post-image"
					:src="img"
					mode="aspectFill"
					@click.stop="previewImage(post.images, imgIndex)"
				/>
			</view>
			<view class="meta">
				<text class="time">{{ post.create_time }}</text>
				<view class="actions">
<!--					<text class="iconfont icon-like">👍</text>-->
<!--					<text>{{ post.likes.length }}</text>-->
					<text class="iconfont icon-comment">💬</text>
					<text>{{ post.comments.length }}</text>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<view class="comment-section">
			<view class="comment-title-row">
				<text class="comment-title">评论</text>
				<text class="comment-count">{{ comments.length }}+</text>
			</view>
			<view class="comment-list">
				<view v-for="(item, idx) in comments" :key="idx" class="comment-item" @click="openReply(idx, null, item.username)">
					<image class="comment-avatar" :src="item.user.avatar_url" mode="aspectFill" />
					<view class="comment-main">
						<view class="comment-header">
							<text class="comment-username">{{ item.user.username }}</text>
							<text class="comment-time">{{ item.create_time }}</text>
						</view>
						<view class="comment-content">{{ item.content }}</view>
						<!-- 子评论 -->
						<view v-if="item.replies && item.replies.length" class="reply-list">
							<view v-for="(reply, ridx) in item.replies" :key="ridx" class="reply-item">
								<image class="reply-avatar" :src="reply.user.avatar" mode="aspectFill" />
								<view class="reply-main">
									<view class="reply-header">
										<text class="reply-username">{{ reply.user.username }}</text>
									</view>
									<view class="reply-content">
										回复 <text class="reply-to">{{ reply.replyTo || item.username }}</text> ：{{ reply.content }}
										<text class="reply-time">{{ reply.time }}</text>
										<text class="reply-action" @click.stop="openReply(idx, ridx, reply.username)">回复</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 回复输入框 -->
		<view v-if="showReplyInput" class="reply-input-mask" @click="closeReply">
			<view class="reply-input-bar" @click.stop>
				<input class="reply-input" v-model="replyContent" :placeholder="replyPlaceholder" maxlength="200" />
				<button class="reply-send-btn" @click="sendReply">发送</button>
			</view>
		</view>

		<!-- 底部常驻一级评论输入框 -->
		<view class="bottom-input-bar">
			<input class="bottom-input" v-model="mainReplyContent" placeholder="写评论，回复楼主..." maxlength="200" />
			<button class="bottom-send-btn" @click="sendMainReply">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				post: {
					user: {
						avatar_url: '',
						nickname: ''
					},
					content: '',
					images: [],
					create_time: '',
					likes: [],
					comments: []
				},
				comments: [],
				commentPageNo: 1,
				commentPageSize: 10,
				commentTotal: 0,
				commentLoading: false,
				showReplyInput: false,
				replyContent: '',
				replyPlaceholder: '',
				replyTarget: { idx: null, ridx: null, username: '' },
				mainReplyContent: '',
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getPostDetail()
				this.getCommentList()
			}
		},
		onReachBottom() {
			if (this.comments.length < this.commentTotal) {
				this.commentPageNo++
				this.getCommentList()
			}
		},
		methods: {
			previewImage(urls, current) {
				uni.previewImage({
					urls,
					current: urls[current]
				})
			},
			checkLogin() {
				if (!this.userInfo.id) {
					uni.showModal({
						title: '提示',
						content: '请先登录后再评论',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/index'
								})
							}
						}
					})
					return false
				}
				return true
			},
			async getPostDetail() {
				try {
					const res = await this.$api.getPostDetail(this.id)
					this.post = res
					if (this.post.images) {
						this.post.images = this.post.images.split(',')
					} else {
						this.post.images = []
					}
				} catch (error) {
					console.error('获取帖子详情失败:', error)
					uni.showToast({
						title: '获取帖子详情失败',
						icon: 'none'
					})
				}
			},
			async getCommentList() {
				if (this.commentLoading) return
				this.commentLoading = true
				try {
					const res = await this.$api.getPostCommentList({
						post_id: this.id,
						pageNo: this.commentPageNo,
						pageSize: this.commentPageSize
					})
          this.comments = res
					this.commentTotal = res.length
				} catch (error) {
					console.error('获取评论列表失败:', error)
					uni.showToast({
						title: '获取评论列表失败',
						icon: 'none'
					})
				} finally {
					this.commentLoading = false
				}
			},
			openReply(idx, ridx, username) {
				if (!this.checkLogin()) return
				this.replyTarget = { idx, ridx, username };
				this.replyPlaceholder = ridx === null ? `回复 @${username}` : `回复 @${username}`;
				this.replyContent = '';
				this.showReplyInput = true;
			},
			closeReply() {
				this.showReplyInput = false;
			},
			sendReply() {
				if (!this.checkLogin()) return
				if (!this.replyContent.trim()) return;
				const data = {
          user_id: this.userInfo.id,
					post_id: this.id,
					content: this.replyContent,
					parent_id: this.replyTarget.ridx === null ? null : this.comments[this.replyTarget.idx].id,
					reply_to_user_id: this.replyTarget.ridx === null ?
						this.comments[this.replyTarget.idx].user_id :
						this.comments[this.replyTarget.idx].replies[this.replyTarget.ridx].user_id
				}
				this.$api.createPostComment(data).then(() => {
					uni.showToast({
						title: '回复成功',
						icon: 'success'
					})
					// 重新获取评论列表
					this.commentPageNo = 1
					this.getCommentList()
				}).catch(error => {
					console.error('回复失败:', error)
					uni.showToast({
						title: '回复失败',
						icon: 'none'
					})
				}).finally(() => {
					this.showReplyInput = false
					this.replyContent = ''
				})
			},
			sendMainReply() {
				if (!this.checkLogin()) return
				if (!this.mainReplyContent.trim()) return;
				const data = {
					post_id: this.id,
					content: this.mainReplyContent,
          user_id: this.userInfo.id,
				}
				this.$api.createPostComment(data).then(() => {
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					})
					// 重新获取评论列表
					this.commentPageNo = 1
					this.getCommentList()
				}).catch(error => {
					console.error('评论失败:', error)
					uni.showToast({
						title: '评论失败',
						icon: 'none'
					})
				}).finally(() => {
					this.mainReplyContent = ''
				})
			}
		}
	}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background: #f8f9fa;
}
.detail-container {
  height: 100%;
	padding-bottom: 32rpx;
  overflow: auto;
}
.post-detail {
	border-radius: 12rpx;
	margin: 24rpx 24rpx 0 24rpx;
	background: #fff;
	padding: 24rpx;
}
.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}
.avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	margin-right: 16rpx;
}
.user-detail {
	display: flex;
	flex-direction: column;
}
.username {
	font-weight: bold;
	font-size: 32rpx;
}
.school {
	font-size: 22rpx;
	color: #888;
	background: #f2f2f2;
	border-radius: 20rpx;
	padding: 2rpx 16rpx;
	margin-top: 4rpx;
	align-self: flex-start;
}
.content {
	font-size: 28rpx;
	margin-bottom: 12rpx;
	color: #222;
}
.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8rpx;
	margin: 12rpx 0;
}
.post-image {
	width: 100%;
	height: 200rpx;
	border-radius: 8rpx;
	object-fit: cover;
}
.meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 22rpx;
	color: #999;
	border-top: 2rpx solid #eee;
	padding-top: 12rpx;
	margin-top: 12rpx;
}
.actions {
	display: flex;
	align-items: center;
	gap: 18rpx;
}
.comment-section {
	margin: 32rpx 24rpx 0 24rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx 0 140rpx 0;
}
.comment-title-row {
	display: flex;
	align-items: center;
	padding: 0 24rpx 16rpx 24rpx;
}
.comment-title {
	font-size: 32rpx;
	font-weight: bold;
}
.comment-count {
	font-size: 28rpx;
	color: #888;
	margin-left: 16rpx;
}
.comment-list {
	padding: 0 0 0 0;
}
.comment-item {
	display: flex;
	align-items: flex-start;
	padding: 24rpx 24rpx 0 24rpx;
	border-bottom: 2rpx solid #f2f2f2;
}
.comment-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.comment-main {
	flex: 1;
	min-width: 0;
}
.comment-header {
	display: flex;
	align-items: center;
	margin-bottom: 4rpx;
}
.comment-username {
	font-size: 28rpx;
	font-weight: bold;
	margin-right: 16rpx;
}
.comment-time {
	font-size: 22rpx;
	color: #888;
}
.comment-content {
	font-size: 24rpx;
	color: #222;
	margin-bottom: 8rpx;
}
.reply-list {
	margin-top: 8rpx;
	margin-left: 0;
}
.reply-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8rpx;
}
.reply-avatar {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	margin-right: 12rpx;
}
.reply-main {
	background: #f6f7fa;
	border-radius: 12rpx;
	padding: 8rpx 16rpx;
	flex: 1;
}
.reply-header {
	display: flex;
	align-items: center;
}
.reply-username {
	font-size: 26rpx;
	font-weight: bold;
	margin-right: 12rpx;
}
.reply-content {
	font-size: 24rpx;
	color: #333;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.reply-time {
	font-size: 22rpx;
	color: #888;
	margin-left: 16rpx;
}
.reply-action {
	font-size: 24rpx;
	color: #4e8ef7;
	margin-left: 24rpx;
	cursor: pointer;
}
.reply-to {
  color: #888;
  margin: 0 4rpx;
}
.reply-input-mask {
	position: fixed;
	left: 0; right: 0; bottom: 0; top: 0;
	background: rgba(0,0,0,0.15);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
}
.reply-input-bar {
	width: 100%;
	background: #fff;
	padding: 24rpx 24rpx 24rpx 24rpx;
	display: flex;
	align-items: center;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
}
.reply-input {
	flex: 1;
	height: 64rpx;
	border-radius: 32rpx;
	background: #f2f3f5;
	border: none;
	padding: 0 24rpx;
	font-size: 28rpx;
	margin-right: 16rpx;
}
.reply-send-btn {
	background: #4e8ef7;
	color: #fff;
	border: none;
	border-radius: 32rpx;
	font-size: 28rpx;
	padding: 0 32rpx;
	height: 64rpx;
	line-height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottom-input-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx 80rpx 24rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.03);
}
.bottom-input {
  flex: 1;
  height: 64rpx;
  border-radius: 32rpx;
  background: #f2f3f5;
  border: none;
  padding: 0 24rpx;
  font-size: 28rpx;
  margin-right: 16rpx;
}
.bottom-send-btn {
  background: #4e8ef7;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  font-size: 28rpx;
  padding: 0 32rpx;
  height: 64rpx;
  line-height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
